﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Component</title>
    <script src="modal.js" defer></script>
    <style>
        *{
            box-sizing:  border-box;
        }
        body{
            margin: 2rem;
            font-family: sans-serif;
        }
    </style>
</head>
<body>
<uc-modal>
    <h1 slot="title">Please Confirm</h1>
    <p>With your confirmation you agree to pay the full amount!</p>
</uc-modal>
<p>Please confirm your choice.</p>
<button>Show Details & Confirm</button>
<script>
    const confirmButton = document.querySelector('button');
    const modal = document.querySelector('uc-modal');

    modal.addEventListener('confirm', () => {
        console.log('confirm...');
    })

    modal.addEventListener('cancel', () => {
        console.log('cancel...');
    })

    confirmButton.addEventListener('click', () => {
        //modal.setAttribute('opened','');
        if(!modal.isOpen){
            modal.open();
        }
    });
</script>
</body>
</html>